<template>
  <div>
    <el-card>
      <div class="row align-items-center">
        <div class="col-md-3">
          <el-image :src="item.gsrc"></el-image>
        </div>
        <div class="col-md-9">
          <div class="row">
            <div class="col-md-12">
              <h4>{{ item.gname }}</h4>
            </div>
          </div>
          <div class="row">
            <div class="col-md-1" style="height: 32px">
              <p style="line-height: 32px"> 数量:</p>
            </div>
            <div class="col-md-2" style="height: 32px">
              <el-input-number :min="1" size="small" :max="100" v-model="item.cnumber" style="height: 40px;"></el-input-number>
            </div>
          </div>
          <div class="row">
            <div class="col-md-1" style="height: 40px">
              <p style="line-height: 40px"> 地址:</p>
            </div>
            <div class="col-md-5">
              <el-input style="line-height: 40px" size="small" v-model="item.clocal"></el-input>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <p>¥:{{item.gprice}}</p>
            </div>
          </div>
          <el-button type="primary" icon="el-icon-check" :data-bs-target="'#'+'modal'+'-'+item.cid" data-bs-toggle="modal">提交</el-button>
          <el-popconfirm title="确认从购物车中删除?" confirm-button-text="好的" cancel-button-text="不用了" @confirm="deleteCart()">
            <el-button type="danger" icon="el-icon-close" slot="reference">删除</el-button>
          </el-popconfirm>

        </div>
      </div>
    </el-card>
    <div :id="'modal'+'-'+item.cid" class="modal fade" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">确认你的订单</h4><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6">
                <el-card shadow="hover" style="margin-bottom: 20px" :body-style="{padding: '0px'}">
                  <el-image :src="item.gsrc"></el-image>
                  <div style="margin-left: 10px;margin-right: 10px;margin-bottom: 10px">
                    <el-row>
                      <el-col :span="24">
                        <el-link type="primary" style="font-size: 18px;margin-top: 5px">{{item.gname}}</el-link>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" class="bi-123"> 数量: {{item.cnumber}}</el-col>
                    </el-row>
                    <el-row style="margin-top: 5px">
                      <el-col :span="24" class="bi-cursor"> 地址: {{item.clocal}}</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" style="height: 40px">
                        <p style="line-height: 40px" class="bi-currency-yen"> 总价格: <span style="line-height: 40px;color: orangered">{{item.cnumber*item.gprice}}</span></p>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </div>
              <div class="col-md-6">
                <el-row>
                  <el-col :span="24" style="height: 40px;text-align: left">
                    <p style="line-height: 40px" class="bi-lock"> 账户密码</p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" style="height: 40px">
                    <el-input size="small" style="line-height: 40px" v-model="password" show-password></el-input>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <el-button data-bs-dismiss="modal">取消</el-button>
            <el-button type="primary" data-bs-dismiss="modal" class="bi-cart" @click="pay()"> 付款</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Cart",
  props:['item'],
  data(){
    return{
      password:'',
      order:{
        uid:sessionStorage.getItem("uid"),
        gid:this.item.gid,
        sid:this.item.sid,

        onumber:this.item.cnumber,
        olocal:this.item.clocal,
        odate:'',
        omoney:this.item.cnumber*this.item.gprice,
        ostate:'已付款',
      }
    }
  },
  methods:{
    pay(){
      this.order.onumber = this.item.cnumber;
      this.order.olocal = this.item.clocal;
      this.order.omoney = this.item.cnumber*this.item.gprice;
      var date = new Date();
      this.order.odate = date.toLocaleDateString()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
      if (this.password ==="") {
        this.$message.error("请输入密码");
      } else if (sessionStorage.getItem("upassword")!==this.password) {
        this.$message.error("密码错误");
      } else {
        axios.post('http://r44734h518.zicp.vip:41569/order/insertOrder',this.order).then(res=>{
          console.log(res.data);
          this.$notify.success("付款成功");
        })
        axios.get('http://r44734h518.zicp.vip:41569/cart/deleteCart?cid='+this.item.cid).then(res=>{
          this.$emit('getCart');
        })
      }
    },
    deleteCart(){
      axios.get('http://r44734h518.zicp.vip:41569/cart/deleteCart?cid='+this.item.cid).then(res=>{
        this.$emit('getCart');
        this.$notify.success("删除成功");
      })
    }
  },
  created() {
    this.upassword = sessionStorage.getItem("upassword");
  },
  beforeCreate() {
    if (sessionStorage.getItem("isLogin") === null){
      this.$message.warning("请先登录");
      this.$router.push({path:'/login'});
    }
  }
}
</script>

<style scoped>

</style>
